<template>
  <div class="reviewManagement">
    <div class="top">
      <div class="left">
        <el-input
          v-model="searchContent.keyWord"
          placeholder="请输入关键字支持模糊检索"
          style="width: 1.1rem; margin-right: 0.1rem"
          :prefix-icon="Search"
        />
        <el-select
          v-model="searchContent.selected"
          class="m-2"
          placeholder="Select"
          style="width: 1.1rem; position: relative; top: -0.0297rem"
        >
          <el-option
            v-for="item in selectedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            ><span style="margin-left: 0.1rem; line-height: 0.18rem">{{
              item.label
            }}</span></el-option
          >
        </el-select>
      </div>
      <div class="middle">
        <el-button type="searchButton" style="width: 0.6rem">查询</el-button>
      </div>
      <div class="right">
        　
      </div>
    </div>
    <body>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          'text-align': 'center',
          'font-weight': 'bold',
          color: '#000',
        }"
        :cell-style="{ 'text-align': 'center' }"
        :footer-cell-style="{
          'text-align': 'center',
        }"
      >
        <el-table-column fixed prop="id" label="id" width="100" />
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="addTime" label="添加时间" width="300" />
        <el-table-column prop="state" label="状态" width="300">
          <template #default="scope">
            <span
              :style="{
                color: checkStateColor(scope.row.state),
              }"
              >{{ scope.row.state }}</span
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template #default>
            <el-button link type="danger" size="small">禁用</el-button>
            <el-button link type="danger" size="small">驳回</el-button>
            <!-- <el-button link type="success" size="small">启用</el-button> -->
            <el-button link type="success" size="small">通过</el-button>
            <el-button link type="primary" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </body>
    <footer>
      <el-pagination
        v-show="total > 0"
        :total="total"
        background
        layout="prev, pager, next"
        v-model:page-size="queryParams.pageSize"
        v-model:current-page="queryParams.pageNum"
        @change="getList"
      />
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import checkColor from "@/views/data/checkColor";
/**
 * 查询内容参数
 */
const searchContent = reactive({
  keyWord: "",
  selected: "1",
});
/**
 * 查询选择参数
 */
const selectedOptions = reactive([
  {
    value: "1",
    label: "全选",
  },
  {
    value: "2",
    label: "启用",
  },
  {
    value: "3",
    label: "禁用",
  },
  {
    value: "4",
    label: "待审核",
  },
]);
/**
 * 表格内容
 */
const tableData = [
  {
    id: "1",
    name: "胡允",
    addTime: "2023-02-22",
    state: "启用",
    task: "20",
    competition: "1",
    remark: "",
  },
  {
    id: "2",
    name: "王泽",
    addTime: "2023-02-23",
    state: "启用",
    task: "--",
    competition: "--",
    remark: "",
  },
  {
    id: "3",
    name: "丁曼容",
    addTime: "2023-02-24",
    state: "禁用",
    task: "5",
    competition: "6",
    remark: "工作不认真",
  },
  {
    id: "4",
    name: "孙忆枫",
    addTime: "2023-02-25",
    state: "待审核",
    task: "",
    competition: "",
    remark: "",
  },
];
/**
 * 获取根据状态显示颜色方法
 */
const { checkStateColor } = checkColor();
/**
 * 分页
 */
let queryParams = reactive({
  pageSize: 10,
  pageNum: 5,
});
let total = ref(100);
const getList = (a, b) => {
  console.log(a, b);
};
</script>

<style lang="scss" scoped>
.reviewManagement {
  padding: 0.18rem 0.14rem;
}
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.el-button--searchButton {
  color: #fff;
  background-color: rgb(61, 154, 184);
  border-color: rgb(61, 154, 184);
}
.el-button--searchButton:focus,
.el-button--searchButton:hover {
  color: #fff;
  background-color: rgb(61, 154, 184, 0.8);
  border-color: rgb(61, 154, 184, 0.8);
}
.el-button--searchButton:active {
  color: #fff;
  background-color: rgb(61, 134, 184);
  border-color: rgb(61, 134, 184);
}
//导入按钮
.el-button--importButton {
  color: #fff;
  background-color: rgb(140, 203, 56);
  border-color: rgb(140, 203, 56);
}
.el-button--importButton:focus,
.el-button--importButton:hover {
  color: #fff;
  background-color: rgb(140, 203, 56, 0.8);
  border-color: rgb(140, 203, 56, 0.8);
}
.el-button--importButton:active {
  color: #fff;
  background-color: rgb(140, 183, 56);
  border-color: rgb(140, 183, 56);
}
//新增按钮
.el-button--addButton {
  color: #fff;
  background-color: rgb(237, 56, 51);
  border-color: rgb(237, 56, 51);
}
.el-button--addButton:focus,
.el-button--addButton:hover {
  color: #fff;
  background-color: rgb(237, 56, 51, 0.8);
  border-color: rgb(237, 56, 51, 0.8);
}
.el-button--addButton:active {
  color: #fff;
  background-color: rgb(237, 36, 51);
  border-color: rgb(237, 36, 51);
}
footer{
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
//分页样式
::v-deep(.el-pagination.is-background .el-pager li.is-active){
  background-color: #fff;
  color: #409EFF;
  border: 0.01rem solid #409EFF;
}
::v-deep(.el-pagination.is-background .el-pager li){
  background-color: #fff;
  color: rgb(65, 80, 88);
  border: 0.01rem solid rgb(187, 187, 187);
}
::v-deep(.el-pagination.is-background .btn-prev){
  background-color: #fff;
  color: rgb(65, 80, 88);
  border: 0.01rem solid rgb(187, 187, 187);
}
::v-deep(.el-pagination.is-background .btn-next){
  background-color: #fff;
  color: rgb(65, 80, 88);
  border: 0.01rem solid rgb(187, 187, 187);
}
</style>
